<template>
  <!-- 首页 -->
  <view class="index">
    <custom title="律师计算器" bg-color="#EEFBFF" titleColor="#000" :isBack="false"></custom>
    <place></place>
    <view class="main">
      <view class="logo-wrap">
        <image src="/static/naoxin-logo.png" class="logo"></image>
      </view>
      <view class="nav-wrap">
        <view class="item" v-for="(item, index) in state.navList" :key="index" @tap="selectMenu(item)">
          <image :src="item.icon" class="icon"></image>
          <view class="title" :class="{ active: item.active }">{{ item.title }}</view>
        </view>
      </view>
      <!-- 计算主体 -->
      <arbitrationFee v-if="state.type == TypeEnum.ARBITRATIONFEE" @changeExplanation="handleChange"></arbitrationFee>
      <attorneyFee v-if="state.type == TypeEnum.ATTORNEYFEE"></attorneyFee>
      <litigationCosts v-if="state.type == TypeEnum.LITIGATIONFEE"></litigationCosts>
      <!--  -->
   
      <view class="naoxin-desc">
        <image src="/static/naoxin-desc.png" class="desc-img"></image>
      </view>
      <view class="explanation">
        <view class="title" v-if="!state.isShowTable">通用说明</view>
        <view class="title" v-if="state.isShowTable">专用说明</view>
        <view v-if="!state.isShowTable">
          <view class="text" v-for="(item, index) in state.explanation" :key="index">
            <text class="serial-number">{{ index + 1 }}</text>
            <text class="content">{{ item }}</text>
          </view>
        </view>
        <view v-if="state.isShowTable">
          <view class="text" v-for="(item, index) in state.explains" :key="index">
            <text class="serial-number">{{ index + 1 }}</text>
            <text class="content">{{ item }}</text>
          </view>
        </view>
      </view>
      <view class="qrcode">
        <image src="/static/naoxin-qrcode.png" class="qrcode-img"></image>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  // @ts-nocheck
  import custom from '@/components/custom/index.vue';
  import place from '@/components/place/index.vue';
  import { TypeEnum } from '@/enums/typeEnum';
  import arbitrationFee from '@/components/arbitrationFee/arbitration-fee.vue';
  import attorneyFee from '@/components/attorneyFee/attorney-fee.vue';
  import litigationCosts from '@/components/litigation-costs/litigation-costs.vue';
  import { reactive } from 'vue';

  const state = reactive({
    navList: [
      {
        icon: '/static/attorney-fees.png',
        title: '律师费',
        active: true,
        type: TypeEnum.ATTORNEYFEE,
      },
      {
        icon: '/static/costs.png',
        title: '诉讼费',
        active: false,
        type: TypeEnum.LITIGATIONFEE,
      },
      {
        icon: '/static/arbitration-fees.png',
        title: '仲裁费',
        active: false,
        type: TypeEnum.ARBITRATIONFEE,
      },
      {
        icon: '/static/worker-compensation.png',
        title: '工伤赔偿',
        active: false,
        type: TypeEnum.WORKERSCOMPENSATION,
      },
      {
        icon: '/static/lending-rate.png',
        title: '贷款利率',
        active: false,
        type: TypeEnum.LENDINFRATES,
      },
      {
        icon: '/static/date-calculation.png',
        title: '日期推算',
        active: false,
        type: TypeEnum.DATECALCULATION,
      },
    ],
    isShowTable: false,
    explains: [],
    type: TypeEnum.ATTORNEYFEE,
    //通用说明是仲裁费的死数据  待改动
    explanation: ['仲裁费用表中的争议金额，以申请人请求的数额为准；请求的数额与实际争议金额不一致的，以实际争议金额为准。', '申请仲裁时争议金额未确定的或情况特殊的，由仲裁委员会根据争议所涉及权益的具体情况确定预先收取的仲裁费用数额。', '仲裁委员会除按照本仲裁费用表收取仲裁费外,可以按照仲裁规则的有关规定收取其他额外的、合理的实际开支。', '裁委员会收取下列案件处理费：\n① 仲裁员因办理仲裁案件出差、开庭而支出的食宿费、交通费以及其他合理费用；\n② 复制、送达案件材料、文书的费用；\n③ 其他应当由当事人承担的合理费用。', '下列案件处理费，由提出申请的当事人预付或者支付给相关单位和人员：\n① 咨询、鉴定、勘验、翻译等费用；\n② 证人、鉴定人、翻译人员等因出庭而支出的食宿费、交通费、误工补贴。', '仲裁费用原则上由败诉的当事人承担；当事人部分胜诉、部分败诉的，由仲裁庭根据当事人各方责任大小确定其各自应当承担的仲裁费用的比例。当事人自行和解或者经仲裁庭调解结案的，当事人可以协商确定各自承担的仲裁费用的比例。\n仲裁庭应当在裁决书、调解书或者决定书中写明双方当事人最终应当支付的仲裁费用金额，结清案件受理费和案件处理费。'],
  });

  function handleChange(params) {
    state.isShowTable = params.isShowTable;
    state.explains = params.explains;
  }

  function selectMenu(item) {
    state.navList.forEach((child) => {
      child.active = false;
      if (item.title == child.title) {
        child.active = true;
        state.type = item.type;
      }
    });
  }
</script>

<style lang="scss" scoped>
  .index {
    width: 100vw;
    height: 100vh;
    font-size: 26rpx;
    color: #333;
    font-weight: 400;
    font-family: PingFang SC-Regular, PingFang SC;
    .main {
      background: linear-gradient(225deg, #eafdff 0%, #eef5ff 23%, #ffffff 57%, #ffffff 100%);
      .logo-wrap {
        padding-top: 16rpx;
        display: flex;
        justify-content: center;
        .logo {
          display: block;
          width: 583rpx;
          height: 108rpx;
        }
      }
      .nav-wrap {
        background-color: #fff;
        border-radius: 40rpx;
        margin: 20rpx 24rpx;
        padding: 20rpx 30rpx;
        display: flex;
        justify-content: space-between;
        box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(91, 139, 250, 0.05);
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          .icon {
            display: block;
            width: 88rpx;
            height: 88rpx;
          }
          .title {
            margin-top: 4rpx;
            font-size: 24rpx;
          }
          .active {
            color: #5186d0;
          }
        }
      }
      .naoxin-desc {
        padding: 80rpx 24rpx;
        .desc-img {
          display: block;
          width: 702rpx;
          height: 56rpx;
        }
      }
      .explanation {
        background: #fff;
        box-shadow: 0rpx -8rpx 12rpx 0rpx rgba(91, 139, 250, 0.05);
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        padding: 20rpx 24rpx;
        .title {
          color: #aaa;
        }
        .text {
          display: flex;
          justify-content: space-between;
          color: #aaa;
          &:not(:last-child) {
            border-bottom: 2rpx solid #eee;
          }
          .serial-number {
            width: 36rpx !important;
            padding: 12rpx 0;
          }
          .content {
            flex: 1;
            padding: 12rpx 0;
            line-height: 24px;
          }
        }
      }
      .qrcode {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 80rpx 0;
        .qrcode-img {
          display: block;
          width: 160rpx;
          height: 160rpx;
          box-shadow: 0rpx 8rpx 20rpx 0rpx #d9d9d9;
          border-radius: 10rpx;
        }
      }
    }
  }
</style>
